<template>
  <div ref="BarECharts" style="width: 100%;height: 100%"></div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import * as echarts from 'echarts';
import {policyLifeData} from '../data/data.js'

const BarECharts = ref(null)

const initEcharts = (() => {
  const color = ['#20E229', '#A8FD03'];
  const xData = policyLifeData.map(item=>item.name);
  const yData = policyLifeData.map(item=>item.value);
  if (BarECharts.value) {
    const Echarts = echarts.init(BarECharts.value);
    const option = {
      tooltip: {
        show: true,
        formatter: '{c}' + '个人',
      },
      grid: {
        borderWidth: 0,
        top:'10%',
        bottom: '25%',
        right: 40,
        left: 60,
        textStyle: {
          color: '#fff',
        },
      },
      xAxis: [
        {
          type: 'category',
          axisLine: {
            lineStyle: {
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              fontSize: 14,
            },
          },
          data: xData,
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: '(企业家数)',
          nameTextStyle: {
            padding: [0, 50, 0, 0],
            color: '#666',
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: '#666',
              fontSize: 16,
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#EAEAEA',
            },
          },
        },
      ],
      series: [
        {
          type: 'pictorialBar',
          symbol: 'path://M35,0L35,70L0,70z M35,0L35,70L70,70z',
          data: yData,
          barWidth: 26,
          symbolOffset: [0, -10],
          z: 99,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: color[1],
                },
                {
                  offset: 0.5,
                  color: color[1],
                },
                {
                  offset: 0.5,
                  color: color[0],
                },
                {
                  offset: 1,
                  color: color[0],
                },
              ]),
              opacity: 1,
            },
          },
        },
        {
          type: 'pictorialBar',
          symbol: 'diamond',
          barWidth: 26,
          symbolSize: ['100%', 20],
          z: 99,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: color[1],
                },
                {
                  offset: 0.5,
                  color: color[1],
                },
                {
                  offset: 0.5,
                  color: color[0],
                },
                {
                  offset: 1,
                  color: color[0],
                },
              ]),
              opacity: 1,
            },
          },
          data: yData,
        },
      ]
    };
    Echarts.setOption(option);
    window.onresize = Echarts.resize
  }
})

onMounted(() => {
  initEcharts()
})

</script>

<style lang="less" scoped>
</style>
